<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
	</head>
	<body>
		<input type="text" name="name" id="input_search" />
		<button type="button">搜索</button>
		<table id="example" class="display cell-border">
			<thead>
				<th><input type="checkbox" name="cb_select_all" /></th>
				<th>id</th>
				<th>名称</th>
				<th>价格</th>
				<th>出版日期</th>
				<th>数量</th>
				<th>操作</th>
			</thead>
			<tbody>

			</tbody>
		</table>
		<script src="../../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let name = "";
			let mytable = $("#example").DataTable({
				// "processing": true,
				"searching": false,
				"ajax": {
					// url可以直接指定远程的json文件，或是MVC的请求地址 /Controller/Action
					url: "http://localhost:8080/getlist",
					type: 'get',
					// 传给服务器的数据，可以添加我们自己的查询参数
					//用于处理服务器端返回的数据。 dataSrc是DataTable特有的
					dataSrc: ''
				},
				"columns": [{
					"data": "id", //指定对象的属性，没render函数时，则属性值
					"className": "dt-body-center",
					"render": function(data, type, row, meta) {
						// console.log(data);//data属性值，为null，则跟row一样
						// console.log(type);
						// console.log(row);//当前行数据
						// console.log(meta);
						return `<input type="checkbox" name="cb_select" value="${data}">`;
					}
				}, {
					"data": "id",
					"render": function(data, type, row, meta) {
						return data + "haha";
					}
				}, {
					"data": "name"
				}, {
					"data": "price"
				}, {
					"data": "date"
				}, {
					"data": "count"
				}, {
					"data": null,
					"render": function(data, type, row, meta) {
						// console.log(data, type, row, meta);
						return `
								<button type="button">编辑</button>
								<button type="button">删除</button>
							`;
					}
				}]
			});
			//完成搜索书名功能。基于数组和基于ajax都要
			$("button").click(function() {
				console.log($("#input_search").val());
				mytable.ajax.url("http://localhost:8080/getlist?name=" + $("#input_search").val()).load();
			})
		</script>
	</body>
</html>
